<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="../libs/twaver.js"></script>
  <script type="text/javascript" src="../libs/stats.min.js"></script>
  <script type="text/javascript">
  var box = new twaver.ElementBox();
  var network = new twaver.vector.Network(box);
  var autoLayouter = new twaver.layout.AutoLayouter(box);
  var stats = new Stats();
  stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom

  function init() {
    var count = 0;
    var view = network.getView();
    document.body.appendChild(view);
    document.body.appendChild(stats.dom);
    network.adjustBounds({
      x: 0,
      y: 0,
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    });
    network.getView().style.backgroundColor = '#a3cbe2';

    var canvas = window.canvas = _twaver.html.createCanvas();
    var w = network._view.offsetWidth;
    var h = network._view.offsetHeight;

    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    canvas.style.pointerEvents = 'none';
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 200, 200);
    network.getView().appendChild(canvas);

    network.addPropertyChangeListener(function(e) {
      if (e.property == "zoom" || e.property === 'viewRect') {
        network.changed = true;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        return;
      }
    });

    network._flowLink = function() {
      count += 0.012;
      if (count > 1) {
        count = 0;
      }
      var self = network;
      if (self.isMovingElement() || self.isSelectingElement() || self.isEditingElement() || self._box._layoutMovingElements) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        return;
      }
      var links = window.linkList;
      if (network.changed) {
        links && links.forEach(function(link) {
          link['cache'] = {};
          return;
        });
      }
      links && links.forEach(function(link) {
        if (!link) return;
        var ui = self.getElementUI(link);
        if (!ui) return;
        var points = ui.getLinkPoints();
        var lineLength = 0;
        if (ui.getLineLength) {
          lineLength = ui.getLineLength();
        } else {
          lineLength = ui._element.getLineLength();
        }
        var point, index = count * lineLength;
        if (!link['cache']) {
          link['cache'] = {};
        }
        var pointInfo = _twaver.math.calculatePointInfoAlongLine(points, true, index, 0);
        point = self.convertPointFromView(pointInfo.point);
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255,20,20,0.9)";
        ctx.fillStyle = "rgba(255,20,20,0.9";
        ctx.lineWidth = 3;
        ctx.arc(point.x - 8, point.y - 8, 1.5, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.fill();
      });
      ctx.globalAlpha = 0.2; // fade rate
      ctx.globalCompositeOperation = "destination-out" // fade out destination pixels
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.globalCompositeOperation = "lighter"; //"source-over"; //"lighter";
      ctx.globalAlpha = 1; // reset alpha
      network.changed = false;
    };
    network.setLinkFlowEnabled(true);
    network.setLinkFlowInterval(100);
    network.setLinkPathFunction(function(linkUI, defaultPoints) {
      var f = linkUI.getFromPoint();
      var t = linkUI.getToPoint();
      var points = new twaver.List();
      points.add(f);
      points.add(t);
      var lineLength = _twaver.math.getDistance(f, t);
      var offset = 0;
      var m = {
        x: (f.x + t.x) / 2,
        y: (f.y + t.y) / 2 + offset,
      }
      var cps = new twaver.List();
      cps.add(m);
      cps.add(t);
      points.removeAt(1);
      points.add(cps);
      return points;
    });
    var linkList = window.linkList = addDatas(200);
  }

  function addDatas(count) {
    var linkList = new twaver.List();
    var link;
    var node = new twaver.Node();
    node.setName("AAA");
    box.add(node);
    for (var i = 0; i < count; i++) {
      var node2 = new twaver.Node(i);
      node2.setName("BBB" + i);
      box.add(node2);
      link = createLink(node, node2);
      linkList.add(link);
    }
    autoLayouter.doLayout('symmetry');
    return linkList;
  }

  function createLink(from, to) {
    var link = new twaver.Link({
      styles: {
        'link.width': 1,
        'link.flow': true,
        'link.flow.color': 'white',
      }
    }, from, to);
    box.add(link);
    return link;
  };
  </script>
</head>

<body onload="init()">
</body>

</html>